<div style="padding: 30px;" class="layui-form seller-alone-form">

    <input type="hidden" name="id" value="{$data.id}">

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i> 房间编号：</label>
        <div class="layui-input-inline" id="room_view">
            
        </div>
    </div>
    <div class="layui-form-item" style="display:none;">
        <label class="layui-form-label"><i class="required-color">*</i> 房间套餐：</label>
        <div class="layui-input-inline" id="taocan_view">
     
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i> 预留姓名：</label>
        <div class="layui-input-inline seller-inline-4">
            <input type="text" name="name" value="{$data.name}" required lay-verify="required" placeholder="请输入预留姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i> 价格：</label>
        <div class="layui-input-inline seller-inline-4">
            <input type="text" name="price" value="{$data.price}" required lay-verify="required" placeholder="请输入金额" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i> 预留电话：</label>
        <div class="layui-input-inline seller-inline-4">
            <input type="text" name="mobile" value="{$data.mobile}" required lay-verify="required" placeholder="请输入预留电话" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="type_select">
        <label class="layui-form-label"><i class="required-color">*</i> 预留类型：</label>
        <div class="layui-input-inline seller-inline-4">
            <select name="type" lay-verify="" value="{$data.type}">
                <option value="2">挂单</option>
                <option value="3">招待</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i> 预留日期：</label>
        <div class="layui-input-inline seller-inline-4">
            <input type="text" id="booking_time" value="{$data.booking_time}" name="booking_time" lay-verify="required" placeholder="请选择时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i> 到店时间：</label>
        <div class="layui-input-inline seller-inline-4">
            <input type="text" id="come_time" name="come_time" value="{$data.come_time}"placeholder="请选择时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i> 备注：</label>
        <div class="layui-input-inline seller-inline-4">
            <input type="text" name="memo" value="{$data.memo}" required placeholder="请输入简单备注" autocomplete="off" class="layui-input">
        </div>
    </div>

    <button class="layui-btn layui-btn-fluid add-save-btn" lay-submit lay-filter="booking-edit">保存</button>

</div>
<script id="bn_tpl" type="text/html">
    <select name="room_id" lay-filter="room" value="{$data.room_id}" >
        <option value="">请选择房间</option>
        {{#  layui.each(d.list, function(index, item){ }}
        <option value="{{ item.id }}">{{ item.bn }}</option>
        {{#  }); }}
    </select>
</script>
<script type="text/html" id="taocan_tpl" >
    <select name="taocan">
        <option value="">请选择套餐</option>
        {{#  layui.each(d.list, function(index, item){ }}
        <option value="{{ item.no }}"   {{#  if(item.no == d.no){ }} selected {{# } }} >{{ item.name }}</option>
        {{#  }); }}
    </select>
</script>
<script>
    layui.use(['table','form','layer','laydate','laytpl'],function(){
        var date = layui.laydate;
        var laytpl = layui.laytpl;
        var form = layui.form;
        var all_date = [];
        JsGet("{:url('review/getAll')}", function(e){
            if(e.data.length>0){
                var getTpl = bn_tpl.innerHTML
                    ,view = document.getElementById('room_view');
                var tmpData = {};
                all_date = tmpData.list = e.data;
                laytpl(getTpl).render(tmpData, function(html){
                    view.innerHTML = html;
                });
                var room_id = '{$data.room_id}';
                $("select[name='room_id']").val(room_id);
                taocan(room_id)
            }
        });
        var taocan = function(room_id) {
            var getTaocan = $('#taocan_tpl').html();
            var taocan_data = {};
            taocan_data.no =  '{$data.taocan.no}'; 
            $.each(all_date, function(k, item) {
                if(room_id == item.id) {
                    taocan_data.list = item.taocan;
                }
            })
            laytpl(getTaocan).render(taocan_data, function(html) {
                $('#taocan_view').html(html)
            })
            form.render();
        }
        form.on('select(room)', function(data){
            taocan(data.value)
        }); 
        date.render({
            elem:'#booking_time'
        });
        date.render({
            elem:'#come_time'
        });
        //layui.form.render();
        if({$data.type} == 1){
            $('#type_select').css('display', 'none');
        }
    });
</script>